<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Spruce IT - Hosts</title>
</head>
<link href="/spruce/css/bootstrap.min.css" rel="stylesheet" media="screen">
<body>
 <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">
   <%@ include file="/WEB-INF/jsp/nav/nav_top_bar.html"%>
  </div>
 </div>
 <div>&nbsp;</div>
 <div class="container-fluid">
  <div class="row">
   <div class="col-xs-2 col-md-2 sidebar">
    <%@ include file="/WEB-INF/jsp/nav/nav_side_bar.html"%>
   </div>
   <div class="col-xs-10 col-md-10 main">
    <h1 class="page-header">Hosts</h1>
    <a class="add_host_btn" href="#"><img src="/spruce/img/window-new-8-24-24.png"></a>
    <form class="form-horizontal" id="add_new_host" role="form" method="post" action="add.do" style="display: none">
     <div class="form-group">
      <label for="name" class="col-sm-2 control-label">Name</label>
      <div class="col-sm-10">
       <input type="text" class="form-control" id="name" name="name" placeholder="Name">
      </div>
     </div>
     <div class="form-group">
      <label for="ipAddress" class="col-sm-2 control-label">IP Address</label>
      <div class="col-sm-10">
       <input type="text" class="form-control" id="ipAddress" name="ipAddress" placeholder="IP Address">
      </div>
     </div>
     <div class="form-group">
      <label for="operatingSystem" class="col-sm-2 control-label">Operating System</label>
      <div class="col-sm-10">
       <select class="form-control" id="operatingSystem" name="osid">
        <c:forEach var="operatingSystem" items="${operatingSystems}">
         <option value="${operatingSystem.id}">${operatingSystem.vendor} ${operatingSystem.product}
          ${operatingSystem.version}</option>
        </c:forEach>
       </select>
      </div>
     </div>
     <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
       <button type="submit" class="btn btn-default">Add</button>
       <button type="reset" class="btn btn-default" id="hostCancel">Cancel</button>
      </div>
     </div>
    </form>
    <div class="table-responsive">
     <table class="table table-striped">
      <thead>
       <tr>
        <th>Name</th>
        <th>IP Address</th>
        <th>Operating System</th>
        <th>Status</th>
       </tr>
      </thead>
      <tbody>
       <c:forEach var="host" items="${hosts}">
        <tr>
         <td>${host.name}</td>
         <td>${host.ipAddress}</td>
         <td>${host.operatingSystem.vendor} ${host.operatingSystem.product} ${host.operatingSystem.version}</td>
         <td><a href="/spruce/admin/host/results.do?hostid=${host.id}"><img
           src="/spruce/img/arrow-right-double-24-24.png" alt="View results"></a></td>
        </tr>
       </c:forEach>
      </tbody>
     </table>
    </div>
   </div>
  </div>
 </div>
 <!-- Bootstrap core JavaScript
================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="/spruce/js/bootstrap.min.js"></script>
 <script src="/spruce/js/spruce-web.js"></script>
 <script type="text/javascript">
		// add the jQuery click/show/hide behaviours (or native JS if you prefer):
		$(document).ready(function() {
			$(".add_host_btn").click(function() {
				if ($("#add_new_host").is(":visible")) {
					$("#add_new_host").hide();
				} else {
					$("#add_new_host").show();
				}
				//don't follow the link (optional, seen as the link is just an anchor)
				return
          false;
			});
			$("#hostCancel").click(function() {
				if ($("#add_new_host").is(":visible")) {
					$("#add_new_host").hide();
				}
				returntrue;
			});
		});
	</script>
</body>
</html>